<template>
  <div class="my-invite">
    <!-- <navbar :title="'我要邀请'"></navbar> -->
    <div class="invite-list">
      <list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div
          class="invite-item"
          v-for="(item,index) in QRCodeList"
          :key="index"
          @click="goToQRCode(item)"
          v-if="item.usableNumber != 0"
        >
          <swipe-cell>
            <!-- <template slot="left">
            <van-button square type="primary" text="选择" />
            </template>-->

            <div class="content">
              <div class="qr-code">
                <img :src="host + item.qrcodePath" alt />
                <p>
                  <icon v-if="!isBefore(item.endTime)" name="eye" color="#fff" :size="22" />
                  <span>{{!isBefore(item.endTime) ? '点击查看' : '已过期'}}</span>
                </p>
              </div>
              <div class="invite-info">
                <div class="grade">
                  <p>代理级别：</p>
                  <p>{{item.levelName}}</p>
                </div>

                <div class="time">
                  <p>有效期限：</p>
                  <p>{{item.endTime}}</p>
                </div>

                <div class="amount">
                  <p>可用次数：</p>
                  <p>{{item.usableNumber}}</p>
                </div>
              </div>
            </div>

            <template slot="right">
              <van-button square type="danger" text="删除" @click="deleteQRCode(index)" />
            </template>
          </swipe-cell>
        </div>
      </list>
    </div>
  </div>
</template>

<script>
import navbar from "../components/navbar.vue";
import { SwipeCell, Button, List, Toast, Icon } from "vant";
import http from "../service/myHttp.js";
import urls from "../service/url.js";
import { mapState } from "vuex";
import { HOST } from "../service/HOST.js";
const moment = require("moment");

export default {
  components: {
    navbar,
    SwipeCell,
    vanButton: Button,
    List,
    Icon
  },
  data() {
    return {
      host: HOST + "/TimelessSystem",
      loading: false,
      finished: false,
      pageNumber: 1,
      pageSize: 10,
      QRCodeList: [
        {
          usableNumber: 25,
          qrcodePath:
            "http://115.28.138.188:8040/TimelessSystem/static/qrfile/3c70f0fdcd3a498c9f54944b68105106.png",
          levelName: "T粉",
          qrcodeUrl:
            "https://timeless.fxpixels.site/agent_apply?userId=2&codeId=3c70f0fdcd3a498c9f54944b68105106",
          endTime: 1571995966000
        }
      ]
    };
  },
  computed: {
    ...mapState({
      userinfo: state => state.login_module.userinfo,
      countAlias: "userinfo",
      navInfo: state => state.router_module.navInfo,
      countAlias: "navInfo"
    })
  },
  mounted() {
    this.QRCodeList = [];
    // this.getQRCodeList();

    // 导航栏右事件
    if (this.navInfo.rightEvent) {
      this.$EventBus.$on(this.navInfo.rightEvent, () => {
        this.$router.push({
          path: "/add_invite_qrcode"
        });
      });
    }
  },
  methods: {
    isBefore(time){
      return moment(time).isBefore(new Date())
    },
    // 删除二维码
    deleteQRCode(index) {
      let id = this.QRCodeList[index].id;
      console.log(id);
      http
        .post(urls.SCEWM, {
          id: id
        })
        .then(res => {
          console.log(res);
          if (res.data.code == 200) {
            Toast.success("删除二维码成功");

            this.pageNumber = 1;
            this.QRCodeList = [];

            this.loading = false;
            this.finished = false;

            // this.onLoad();
          }
        });
    },
    // 获取二维码列表
    async onLoad() {
      http
        .post(urls.HQEWMLB, {
          createBy: this.userinfo.id,
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        })
        .then(res => {
          if (res.data.code == 200) {
            this.QRCodeList = this.QRCodeList.concat(res.data.data);
            this.pageNumber++;

            console.log("继续加载");
            this.loading = false;
          }
          if (res.data.code == 300) {
            console.log("加载成功");
            this.loading = false;
            this.finished = true;
          }
        });
    },
    // 获取二维码列表（弃用）
    getQRCodeList() {
      this.pageNumber = 1;

      http
        .post(urls.HQEWMLB, {
          createBy: this.userinfo.id,
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        })
        .then(res => {
          console.log(res);
          if (res.data.code == 200) {
            this.QRCodeList = res.data.data;
            this.pageNumber++;
          }
        });
    },
    goToQRCode(obj) {
      let res = moment(new Date()).isAfter(obj.endTime);

      if (res) {
        Toast("当前二维码已过期");
        return false;
      }

      this.$router.push({
        path: "/recruit_qrcode",
        query: obj
      });
    }
  }
};
</script>

<style scoped>
.invite-list {
  /* background-color: #fff; */
}

.invite-item {
  margin-bottom: 2px;
}

.invite-item .content {
  display: flex;
  padding: 10px 15px;
  align-items: center;
  position: relative;
  background-color: #fff;
}

.invite-item .van-button {
  height: 100%;
}

.qr-code {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.qr-code img {
  width: 95%;
  height: 95%;
  filter: blur(1.3px);
}

.qr-code p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.qr-code p span {
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 0 3px;
  border: 1px solid #fff;
  border-radius: 3px;
}

.invite-info {
  padding-left: 10px;
  height: 100%;
  flex: 1;
}

.invite-info > div {
  display: flex;
}

.invite-info > div > p:last-child {
  padding-left: 5px;
}
</style>